<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>跟IOS交互</title>
  <!--
      @blog
      http://www.cnblogs.com/jiang-xiao-yan/p/5345755.html
      http://blog.csdn.net/mociml/article/details/47701133

      WebViewJavascriptBridge 原理
      https://gold.xitu.io/entry/57a2d325165abd006137247d
      http://www.2cto.com/kf/201503/384998.html

      -- WebViewJavascriptBridge 框架
      @github https://github.com/marcuswestin/WebViewJavascriptBridges
  -->
</head>
<body>

<h1>测试交互效果</h1>

<script>
  function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
      return callback(WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function () {
      document.documentElement.removeChild(WVJBIframe)
    }, 0)
  }

  /**
   * 所有交互方法
   */
  setupWebViewJavascriptBridge(function (bridge) {

    /* Initialize your app here */

    /**
     * 监听OC事件
     * @param data 返回数据
     * @param responseCallback OC回调
     */
    bridge.registerHandler('JS Echo', function (data, responseCallback) {
      // console.log("JS Echo called with:", data)
      responseCallback(data)
    });

    // @example
    bridge.registerHandler("showAlert", function (data) {
      alert(data)
    });

    /**
     * 向OC发布事件
     * @param Obj 传输数据
     * @param function responseCallback 回调
     */
    bridge.callHandler('ObjC Echo', {'key': 'value'}, function responseCallback(responseData) {
      console.log("JS received response:", responseData)
    });

    // @example
    bridge.callHandler("height", null, function(response) {
      alert('Screen height:' + response)
    })

  });

  setupWebViewJavascriptBridge(function (bridge) {})
  setupWebViewJavascriptBridge(function (bridge) {})
  setupWebViewJavascriptBridge(function (bridge) {})
</script>
</body>
</html>